<template>
  <div class="dingtalk-login-page">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="spinner"></div>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-state">
      <div class="error-icon">⚠️</div>
      <p class="error-message">{{ error }}</p>
      <button class="retry-btn" @click="loadDingTalkAuth">重试</button>
    </div>

    <!-- 二维码显示 - 全屏 -->
    <div v-else class="qrcode-wrapper">
      <iframe 
        :src="authUrl" 
        class="dingtalk-iframe"
        frameborder="0"
        scrolling="yes"
        allow="camera; microphone"
      ></iframe>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getDingTalkAuthUrl } from '../../api/auth'

const router = useRouter()
const route = useRoute()

// 状态
const loading = ref(true)
const error = ref('')
const authUrl = ref('')

// 从 URL 参数或 localStorage 获取用户角色
const userType = computed(() => {
  return route.query.userType || localStorage.getItem('dingtalk_user_type') || 'jobseeker'
})

// 返回登录页
const goBack = () => {
  router.push('/login')
}

// 加载钉钉授权链接
const loadDingTalkAuth = async () => {
  loading.value = true
  error.value = ''

  try {
    console.log('🔄 正在获取钉钉授权链接...')
    console.log('👤 用户角色:', userType.value === 'recruiter' ? '招聘者' : '求职者')

    // 保存用户选择的角色到 localStorage
    localStorage.setItem('dingtalk_user_type', userType.value)

    // 调用后端接口获取授权URL
    const response = await getDingTalkAuthUrl()

    console.log('后端返回:', response)

    // 适配后端返回格式
    let url = null
    if (response.data && response.data.auth_url) {
      url = response.data.auth_url
    } else if (response.auth_url) {
      url = response.auth_url
    }

    if (!url) {
      throw new Error(response.message || '获取授权URL失败')
    }

    authUrl.value = url
    console.log('✅ 钉钉授权链接获取成功')
    console.log('🔗 授权链接:', url)
    console.log('👉 请使用钉钉APP扫描二维码')

  } catch (err) {
    console.error('❌ 获取钉钉授权链接失败:', err)
    error.value = err.response?.data?.message || err.message || '获取授权链接失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 页面加载时获取授权链接
onMounted(() => {
  loadDingTalkAuth()
})
</script>

<style scoped>
.dingtalk-login-page {
  width: 100vw;
  height: 100vh;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 加载状态 */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 错误状态 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 40px;
  background: #ffffff;
}

.error-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.error-message {
  font-size: 16px;
  color: #333;
  margin-bottom: 24px;
  line-height: 1.6;
}

.retry-btn {
  padding: 12px 32px;
  background: #7c3aed;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.retry-btn:hover {
  background: #a855f7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* 二维码显示 - 全屏 */
.qrcode-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dingtalk-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: #ffffff;
  display: block;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dingtalk-iframe {
    width: 100%;
    height: 100%;
  }
}
</style>

